07. Exercise: Apply a Theme

Now it's time for you to complete this exercise yourself!

In this exercise you’re going to add downloadable fonts to your app, and then use a Theme to apply a cool new font to all the views.

1. View your layout in the Design Viewer.

In home_fragment.xml, select the Design tab at the bottom of the screen to open the Design Surface view.

2. Select the title TextView you styled in the last exercise.

3. With the TextView still selected, open the attributes panel and scroll down to fontFamily and select More Fonts… from the dropdown box.

You may have to scroll all the way down to the bottom of the dropdown to find More Fonts… When you click on it a Resources screen will pop up.

4. Select Lobster Two from the list of downloadable fonts.

You can also search for the font name in the search box at the top. Of course, you can use whichever font you want, but we chose this once because it will give the app a “distinctive” feel.

5. Select OK from the next screen to have AS generate the font’s xml for you.

6. Find the meta-data entry in the manifest file.

Open AndroidManifest.xml and look for the meta-data entry that tells Android Play Services that this app wants to use preloaded fonts, so Android will know to download the fonts for your app:

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

7. Add a fontFamily & android:fontFamily attributes to your theme.

Open res/values/styles.xml and add a fontFamily attribute for the font you just set up to the AppTheme style:**

<item name="fontFamily">@font/lobster_two</item>
<item name="android:fontFamily">@font/lobster_two</item>

8. Find the new resource files Android Studio has added to your project.

There should be three new xml files related to your preloaded fonts:

res/font/font_certs.xml
res/values/preloaded_fonts.xml
res/values/lobster_two.xml

Finally, run your code, and make sure Android has applied the new font to all of your text.

If you want to start at this step, you can download this exercise from: Step.02-Exercise-Apply-a-Theme.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.02-Solution-Apply-a-Theme, or using this git diff.

Reference documentation

• Downloadable Fonts

• Fonts in XML

• Styles and Themes

• Design app themes with Theme Editor